<template>
	<div class="admin-page">
		<div class="search-section">
			<div class="search-form">
				<div class="search-item">
					<input type="text" v-model="messageeq.author_id" placeholder="请输入作者ID" />
				</div>
				<div class="search-item">
					<input type="text" v-model="messageeq.time" placeholder="请输入留言时间" />
				</div>
				<div class="search-buttons">
					<button class="primary" @click="getMessageData()">
						<i class="el-icon-search"></i>
						搜索
					</button>
					<button class="default" @click="resetSearch()">
						<i class="el-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</div>
		<div class="table-section">
			<el-card class="box-card" shadow="never">
				<template #header>
					<div class="card-header">
						<span>留言列表</span>
					</div>
				</template>
				<!-- 表格主体 -->
				<el-table :data="paginatedTableData" border highlight-current-row @row-click="handleRowClick"
					empty-text="暂无留言数据" @selection-change="handleSelectionChange" ref="messageTableRef">
					<!-- 表格列定义 -->
					<el-table-column prop="id" label="ID" min-width="80" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="username" label="用户名" min-width="120" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="comment" label="留言内容" min-width="300" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="time" label="留言时间" min-width="180" show-overflow-tooltip
						align="center"></el-table-column>
					<el-table-column prop="support" label="点赞数" min-width="100" align="center">
						<template #default="scope">
							<span class="support-count">{{ scope.row.support }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200" align="center" fixed="right">
						<template #default="scope">
							<el-button type="danger" link class="operation-button danger"
								@click.stop="handleDelete(scope.row)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>

				<!-- 分页控件 -->
				<div class="pagination-container">
					<el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="totalItems"
						:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :current-page="currentPage"
						@size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue";
	import axios from "@/api/apiaxios";
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus';

	// --- 搜索表单数据 ---
	const messageeq = ref({
		author_id: null,
		time: "",
	});

	// --- 表格数据源 ---
	const allMessageData = ref([]);

	// --- 表格实例引用 ---
	const messageTableRef = ref(null);

	// --- 选择状态 ---
	const multipleSelection = ref([]);

	// --- 分页状态 ---
	const currentPage = ref(1);
	const pageSize = ref(10);

	// --- 计算属性 ---
	const totalItems = computed(() => allMessageData.value.length);

	const paginatedTableData = computed(() => {
		if (!allMessageData.value || allMessageData.value.length === 0) {
			return [];
		}
		const startIndex = (currentPage.value - 1) * pageSize.value;
		const endIndex = startIndex + pageSize.value;
		return allMessageData.value.slice(startIndex, endIndex);
	});

	// --- 方法 ---
	const handleRowClick = (row) => {
		console.log("Row clicked:", row);
	};

	const handleSelectionChange = (selection) => {
		multipleSelection.value = selection;
	};

	const handleSizeChange = (newSize) => {
		pageSize.value = newSize;
		currentPage.value = 1;
	};

	const handleCurrentChange = (newPage) => {
		currentPage.value = newPage;
	};

	const handleReply = (row) => {
		ElMessage({
			message: `回复用户 ${row.username} 的留言`,
			type: 'info'
		});
	};

	const handleDelete = (row) => {
		ElMessageBox.confirm(
				`确定要删除用户 ${row.username} 的留言吗？`,
				'警告', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
			.then(() => {
				// 这里添加删除留言的逻辑
				ElMessage({
					type: 'success',
					message: '删除成功',
				});


				console.log(row);
				const message = {
					id: row.id
				};
				const res = axios.post("/api/message/deleteAlleq",
					message, {
						headers: {
							'Content-Type': 'application/json'
						}
					});

				res
					.then(response => {
						if (response.data.code == 200) {
							// 这里添加保存文章的逻辑
							ElMessage({
								type: 'success',
								message: '删除成功',
							});

						} else {
							ElMessage.error(response.data.message || '修改失败');
						}
					})
					.catch(error => {
						console.error('请求失败:', error);
						ElMessage.error('网络请求失败，请稍后重试');
					});
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消删除',
				});
			});
	};

	function getMessageData() {
		const res = axios.post("/api/message/selecteq",
			messageeq.value, {
				headers: {
					'Content-Type': 'application/json'
				}
			});

		res
			.then(response => {
				if (response.data.code == 200) {
					allMessageData.value = response.data.data;
					if (allMessageData.value.length === 0) {
						ElMessage({
							message: '未找到匹配的留言数据',
							type: 'warning'
						});
					}
				} else {
					ElMessage.error(response.data.message || '查询失败');
				}
			})
			.catch(error => {
				console.error('请求失败:', error);
				ElMessage.error('网络请求失败，请稍后重试');
			});
	}

	// 添加重置搜索条件的方法
	const resetSearch = () => {
		messageeq.value = {
			author_id: null,
			time: ""
		};
		getMessageData(); // 重置后自动搜索
	};

	onMounted(() => {
		getMessageData();
	});
</script>

<style lang="scss" scoped>
	/* 页面容器样式 */
	.admin-page {
		padding: 20px;
		background-color: #f5f7fa;
		min-height: calc(100vh - 60px);
		position: absolute;
		//margin:20px;
		top: 25px;
		//overflow-y: hidden;
	}

	/* 搜索区域样式 */
	.search-section {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
		padding: 24px;
		margin-bottom: 20px;

		.search-form {
			display: flex;
			flex-wrap: wrap;
			gap: 16px;
			align-items: center;
		}

		.search-item {
			flex: 1;
			min-width: 200px;
			max-width: 300px;
		}

		input {
			width: 100%;
			height: 40px;
			padding: 0 15px;
			border: 1px solid #dcdfe6;
			border-radius: 4px;
			transition: all 0.3s;
			outline: none;
			font-size: 14px;
			color: #606266;
			background-color: #fff;

			&:focus {
				border-color: #409eff;
				box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
			}

			&::placeholder {
				color: #c0c4cc;
			}
		}

		.search-buttons {
			display: flex;
			gap: 12px;
			margin-left: auto;
		}

		button {
			min-width: 88px;
			height: 40px;
			padding: 0 20px;
			font-size: 14px;
			border-radius: 4px;
			border: none;
			cursor: pointer;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;

			&.primary {
				background-color: #409eff;
				color: white;

				&:hover {
					background-color: #66b1ff;
				}

				&:active {
					background-color: #3a8ee6;
				}
			}

			&.default {
				background-color: #fff;
				border: 1px solid #dcdfe6;
				color: #606266;

				&:hover {
					border-color: #409eff;
					color: #409eff;
				}
			}
		}
	}

	/* 表格区域样式 */
	.table-section {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
		overflow: hidden;

		.box-card {
			border: none;

			:deep(.el-card__header) {
				padding: 20px 24px;
				border-bottom: 1px solid #ebeef5;
				background-color: #fff;
			}

			:deep(.el-card__body) {
				padding: 0;
			}
		}

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			span {
				font-size: 16px;
				font-weight: 500;
				color: #303133;
			}
		}

		/* 表格样式 */
		:deep(.el-table) {
			max-height: calc(100vh - 300px);

			th {
				background-color: #f5f7fa;
				color: #606266;
				font-weight: 500;
				padding: 12px 0;
				border-bottom: 1px solid #ebeef5;
			}

			td {
				padding: 12px 0;
				border-bottom: 1px solid #ebeef5;
			}

			.el-table__empty-block {
				min-height: 200px;

				.el-table__empty-text {
					color: #909399;
					font-size: 14px;
				}
			}

			.cell {
				line-height: 1.5;
			}
		}

		/* 分页控件样式 */
		.pagination-container {
			padding: 20px 24px;
			display: flex;
			justify-content: flex-end;
			background-color: #fff;
			border-top: 1px solid #ebeef5;

			:deep(.el-pagination) {
				button {
					min-width: 32px;
					height: 32px;

					&:disabled {
						background-color: #f5f7fa;
					}
				}

				.el-pagination__total {
					margin-right: 16px;
					font-size: 14px;
				}

				.el-pagination__sizes {
					margin-right: 16px;
				}

				.el-pager li {
					min-width: 32px;
					height: 32px;
					line-height: 32px;
					font-size: 14px;

					&.active {
						background-color: #409eff;
						color: #fff;
					}

					&:hover {
						color: #409eff;
					}
				}
			}
		}
	}

	/* 操作按钮样式 */
	.operation-button {
		padding: 6px 16px;
		font-size: 14px;
		border-radius: 4px;
		transition: all 0.3s;

		&.primary {
			color: #409eff;

			&:hover {
				color: #66b1ff;
				background-color: #ecf5ff;
			}
		}

		&.danger {
			color: #f56c6c;

			&:hover {
				color: #f78989;
				background-color: #fef0f0;
			}
		}
	}

	/* 消息特有的样式 */
	.message-content {
		padding: 8px 12px;
		line-height: 1.6;
		text-align: left;
		word-break: break-all;
		color: #606266;
		background-color: #fafafa;
		border-radius: 4px;
		max-height: 60px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.message-time {
		color: #909399;
		font-size: 13px;
	}

	/* 对话框样式 */
	:deep(.el-dialog) {
		border-radius: 8px;
		overflow: hidden;

		.el-dialog__header {
			margin: 0;
			padding: 20px 24px;
			border-bottom: 1px solid #ebeef5;

			.el-dialog__title {
				font-size: 16px;
				font-weight: 500;
				color: #303133;
			}
		}

		.el-dialog__body {
			padding: 24px;
		}

		.el-dialog__footer {
			padding: 16px 24px;
			border-top: 1px solid #ebeef5;
		}
	}

	/* 表单样式 */
	:deep(.el-form) {
		.el-form-item__label {
			font-weight: 400;
			color: #606266;
		}

		.el-input__inner {
			border-radius: 4px;
		}

		.el-textarea__inner {
			border-radius: 4px;
		}
	}

	.dialog-footer {
		padding-top: 20px;
		text-align: right;
	}
</style>